<template>
    <div class="row row--15 service-wrapper">
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12" v-for="(service, index) in serviceList" :key=index>
            <div :class="`card-box ${cardStyle} ${checkTextAlign}`" data-aos="fade-up" data-aos-delay="70">
                <div class="inner">
                    <div class="image">
                        <img :src="service.image" alt="card Images" />
                    </div>
                    <div class="content">
                        <h4 class="title mb--20" v-html="service.title" style="font-weight: 700;">
                        </h4>
                        <p class="description b1 color-gray mb--0" v-html="service.description" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ServiceTwo',
    props: {
        cardStyle: {
            type: String
        },
        textAlign: {
            type: String,
            default: 'left'
        }
    },
    data() {
        return {
            serviceList: [
                {
                    image: require('@/assets/images/service/service-001.png'),
                    title: '全球短信',
                    description: '每条短信都能帮助您的企业快速验证全球用户'
                },
                {
                    image: require('@/assets/images/service/service-002.png'),
                    title: '全球短信',
                    description: '每条短信都能帮助您的企业与客户建立有效的通知'
                },
                {
                    image: require('@/assets/images/service/service-003.png'),
                    title: '全球短信',
                    description: '每条短信都能帮助您的企业与客户创造新的机会'
                },
                {
                    image: require('@/assets/images/service/service-004.png'),
                    title: '全球短信',
                    description: '每条短信都能帮助您的企业及时了解客户意图,为客户提供服务'
                }
            ]
        }
    },
    computed: {
        checkTextAlign() {
            if (this.textAlign === 'left') return 'text-start';
            else if (this.textAlign === 'center') return 'text-center';
            else if (this.textAlign === 'end') return 'text-end';
            else return '';
        }
    }
}
</script>